<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		div {
			width: 1000px;
			height: 800px;
		}
	</style>
	<script src="js/echarts.js"></script>
	<script src="js/china.js"></script>
</head>

<body>
	<div id="chart"></div>
	<script>
		function random() {
			return Math.round(Math.random() * 1000);
		}

		var myChart = echarts.init(document.getElementById('chart'));
		myChart.setOption({
			visualMap:[
				{
					type:'continuous',
					min:0,
					max:1000,
					range:[300,800],
					calculable:true,
					realtime:false,
					inverse:false,
					orient:'vertical',
					precision:2,
					itemWidth:40,
					itemHeight:200,

					//align:'right',

					text:['hight','low'],
					textGap:20,
					show:true,

					dimension:0,

					hoverLink:true,


					//方式1：共同定义
					/* inRange:{
						color:['pink'],
					},
					outOfRange:{
						color:['green'],
					} */

					//方式2：分别定义
					/* target:{
						inRange:{
							color:['pink'],
						},
						outOfRange:{
							color:['green'],
						}
					},
					controller:{
						inRange:{
							color:['pink'],
						},
						outOfRange:{
							color:['green'],
						}
					} */

					//方式3：先全部定义，再单独定义
					inRange:{
						color:['teal','teal'],
						symbol:['circle','rect'],
					},
					controller:{
						inRange:{
							color:['red','green','pink'],
						},
					}
				}
			],
			series: [
				{
					type: 'map',	//地图类型的图表
					mapType: 'china',	//地图的类型是中国地图
					roam: true,	//是否开启鼠标缩放的功能
					data: [
						{ name: '北京', value: random() },
						{ name: '天津', value: random() },
						{ name: '上海', value: random() },
						{ name: '重庆', value: random() },
						{ name: '河北', value: random() },
						{ name: '河南', value: random() },
						{ name: '云南', value: random() },
						{ name: '辽宁', value: random() },
						{ name: '黑龙江', value: random() },
						{ name: '湖南', value: random() },
						{ name: '安徽', value: random() },
						{ name: '山东', value: random() },
						{ name: '新疆', value: random() },
						{ name: '江苏', value: random() },
						{ name: '浙江', value: random() },
						{ name: '江西', value: random() },
						{ name: '湖北', value: random() },
						{ name: '广西', value: random() },
						{ name: '甘肃', value: random() },
						{ name: '山西', value: random() },
						{ name: '内蒙古', value: random() },
						{ name: '陕西', value: random() },
						{ name: '吉林', value: random() },
						{ name: '福建', value: random() },
						{ name: '贵州', value: random() },
						{ name: '广东', value: random() },
						{ name: '青海', value: random() },
						{ name: '西藏', value: random() },
						{ name: '四川', value: random() },
						{ name: '宁夏', value: random() },
						{ name: '海南', value: random() },
						{ name: '台湾', value: random() },
						{ name: '香港', value: random() },
						{ name: '澳门', value: random() }
					]
				}
			]
		});
	</script>
</body>

</html>